<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>2.7 调试Flutter应用 | 落光的Pro博客</title>
    <meta name="description" content="Vite & Vue powered static site generator.">
    <link rel="preload stylesheet" href="./assets/style.4b0df91d.css" as="style">
    
    <script type="module" src="./assets/app.0acbd3fd.js"></script>
    <link rel="preload" href="./assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="./assets/chunks/framework.eaf25f5b.js">
    <link rel="modulepreload" href="./assets/chunks/theme.ce44a0e6.js">
    <link rel="modulepreload" href="./assets/largeFrontEnd_flutter_chapter2_flutter_app_debug.md.67a72433.lean.js">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-1919c326><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-1919c326 data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="./" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="./icon-radius.png" alt data-v-8426fc1a><!--]--><!--[-->落光的Pro博客<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-a0fd61f4><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-9c007e85><span class="text" data-v-9c007e85><!----><span data-v-9c007e85>大前端</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-9c007e85><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./largeFrontEnd/webFrontEnd/md/01.html" data-v-43f1e123><!--[-->Web前端<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./largeFrontEnd/uniapp/" data-v-43f1e123><!--[-->Uni-app<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./largeFrontEnd/weChatMiniProgram/" data-v-43f1e123><!--[-->微信小程序<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./largeFrontEnd/electron/" data-v-43f1e123><!--[-->Electron<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./largeFrontEnd/flutter/" data-v-43f1e123><!--[-->Flutter<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./largeFrontEnd/interview/01.html" data-v-43f1e123><!--[-->前端面试题<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="./backEnd/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>后端</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="./linux/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Linux</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="./myTeam/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>我的团队</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/luoguangguang" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="..." aria-label="cool link" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/luoguangguang" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="..." aria-label="cool link" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-1919c326 data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-1919c326 data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 collapsible" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Flutter入门到实战</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-e31bd47b><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-e31bd47b><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter1/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第一章 初识Flutter</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter2/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第二章 简介</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter3/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第三章 基础组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter4/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第四章 布局类组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter5/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第五章 容器类Widget</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter6/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第六章 可滚动组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter7/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第七章 功能型Widget简介</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter8/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第八章 事件处理与通知</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter9/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第九章 动画</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter10/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第十章 自定义组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter11/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第十一章 文件操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter12/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第十二章 Flutter 扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter13/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第十三章 多语言</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="./largeFrontEnd/flutter/chapter14/index.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>第十四章 高级进阶</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-1919c326 data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-6ae8e080><div class="content" data-v-6ae8e080><div class="outline-marker" data-v-6ae8e080></div><div class="outline-title" role="heading" data-v-6ae8e080>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-6ae8e080><span class="visually-hidden" id="doc-outline-aria-label" data-v-6ae8e080> Table of Contents for current page </span><ul class="root" data-v-6ae8e080 data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><div class="VPDocAsideCarbonAds" data-v-3f215769><div class="VPCarbonAds" data-v-2e1efd59></div></div><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _largeFrontEnd_flutter_chapter2_flutter_app_debug" data-v-6b87e69f><div><h1 id="_2-7-调试flutter应用" tabindex="-1">2.7 调试Flutter应用 <a class="header-anchor" href="#_2-7-调试flutter应用" aria-label="Permalink to &quot;2.7 调试Flutter应用&quot;">​</a></h1><p>有各种各样的工具和功能来帮助调试Flutter应用程序。</p><h2 id="_2-7-1-日志与断点" tabindex="-1">2.7.1 日志与断点 <a class="header-anchor" href="#_2-7-1-日志与断点" aria-label="Permalink to &quot;2.7.1 日志与断点&quot;">​</a></h2><h3 id="_1-debugger-声明" tabindex="-1">1. <code>debugger()</code> 声明 <a class="header-anchor" href="#_1-debugger-声明" aria-label="Permalink to &quot;1. `debugger()` 声明&quot;">​</a></h3><p>当使用Dart Observatory（或另一个Dart调试器，例如IntelliJ IDE中的调试器）时，可以使用该<code>debugger()</code>语句插入编程式断点。要使用这个，你必须添加<code>import &#39;dart:developer&#39;;</code>到相关文件顶部。</p><p><code>debugger()</code>语句采用一个可选<code>when</code>参数，我们可以指定该参数仅在特定条件为真时中断，如下所示：</p><div class="language-dart vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">dart</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">void</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">someFunction</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">double</span><span style="color:#E1E4E8;"> offset) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#B392F0;">debugger</span><span style="color:#E1E4E8;">(</span><span style="color:#F97583;">when:</span><span style="color:#E1E4E8;"> offset </span><span style="color:#F97583;">&gt;</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">30.0</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#6A737D;">// ...</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">void</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">someFunction</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">double</span><span style="color:#24292E;"> offset) {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#6F42C1;">debugger</span><span style="color:#24292E;">(</span><span style="color:#D73A49;">when:</span><span style="color:#24292E;"> offset </span><span style="color:#D73A49;">&gt;</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">30.0</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#6A737D;">// ...</span></span>
<span class="line"><span style="color:#24292E;">}</span></span></code></pre></div><h3 id="_2-print、debugprint、flutter-logs" tabindex="-1">2. <code>print</code>、<code>debugPrint</code>、<code>flutter logs</code> <a class="header-anchor" href="#_2-print、debugprint、flutter-logs" aria-label="Permalink to &quot;2. `print`、`debugPrint`、`flutter logs`&quot;">​</a></h3><p>Dart <code>print()</code>功能将输出到系统控制台，我们可以使用<code>flutter logs</code>来查看它（基本上是一个包装<code>adb logcat</code>）。</p><p>如果你一次输出太多，那么Android有时会丢弃一些日志行。为了避免这种情况，我们可以使用Flutter的<code>foundation</code>库中的<a href="https://docs.flutter.io/flutter/foundation/debugPrint.html" target="_blank" rel="noreferrer"><code>debugPrint()</code></a> ，它封装了 print，将一次输出的内容长度限制在一个级别（内容过多时会分批输出），避免被Android内核丢弃。</p><p>Flutter框架中的许多类都有<code>toString</code>实现，按照惯例，输出信息通过包括对象的运行时类型 、类名以及关键字段等信息。 树中的一些类也具有<code>toStringDeep</code>实现，从该点返回整个子树的多行描述。一些具有详细信息<code>toString</code>的类会实现一个<code>toStringShort</code>，它只返回对象的类型或其他非常简短的（一个或两个单词）描述。</p><h3 id="_3-调试模式断言" tabindex="-1">3. 调试模式断言 <a class="header-anchor" href="#_3-调试模式断言" aria-label="Permalink to &quot;3. 调试模式断言&quot;">​</a></h3><p>在Flutter应用调试过程中，Dart <code>assert</code>语句被启用，并且 Flutter 框架使用它来执行许多运行时检查来验证是否违反一些不可变的规则。当一个某个规则被违反时，就会在控制台打印错误日志，并带上一些上下文信息来帮助追踪问题的根源。</p><p>要关闭调试模式并使用发布模式，请使用<code>flutter run --release</code>运行我们的应用程序。 这也关闭了Observatory调试器。一个中间模式可以关闭除Observatory之外所有调试辅助工具的，称为“profile mode”，用<code>--profile</code>替代<code>--release</code>即可。</p><h3 id="_4-断点" tabindex="-1">4. 断点 <a class="header-anchor" href="#_4-断点" aria-label="Permalink to &quot;4. 断点&quot;">​</a></h3><p>开发过程中，断点是最实用的调试工具之一，我们以 Android Studio 为例，如图2-19：</p><p><img src="/assets/2-19.f4c83ff9.png" alt="2-19"></p><p>我们在 93 行打了一个断点，一旦代码执行到这一行就会暂停，这时我们可以看到当前上下文所有变量的值，然后可以选择一步一步的执行代码。关于如何通过 IDE 来打断点，网上教程很多，读者可以自行搜索。</p><h2 id="_2-7-2-调试应用程序层" tabindex="-1">2.7.2 调试应用程序层 <a class="header-anchor" href="#_2-7-2-调试应用程序层" aria-label="Permalink to &quot;2.7.2 调试应用程序层&quot;">​</a></h2><p>Flutter框架的每一层都提供了将其当前状态或事件转储(dump)到控制台（使用<code>debugPrint</code>）的功能。</p><h3 id="_1-widget-树" tabindex="-1">1. Widget 树 <a class="header-anchor" href="#_1-widget-树" aria-label="Permalink to &quot;1. Widget 树&quot;">​</a></h3><p>要转储Widgets树的状态，请调用<a href="https://docs.flutter.io/flutter/widgets/debugDumpApp.html" target="_blank" rel="noreferrer"><code>debugDumpApp()</code></a>。 只要应用程序已经构建了至少一次（即在调用<code>build()</code>之后的任何时间），我们可以在应用程序未处于构建阶段（即，不在<code>build()</code>方法内调用 ）的任何时间调用此方法（在调用<code>runApp()</code>之后）。</p><p>如, 这个应用程序:</p><div class="language-dart vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">dart</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;package:flutter/material.dart&#39;</span><span style="color:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">void</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">main</span><span style="color:#E1E4E8;">() {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#B392F0;">runApp</span><span style="color:#E1E4E8;">(</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#79B8FF;">MaterialApp</span><span style="color:#E1E4E8;">(</span></span>
<span class="line"><span style="color:#E1E4E8;">      home</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">AppHome</span><span style="color:#E1E4E8;">(),</span></span>
<span class="line"><span style="color:#E1E4E8;">    ),</span></span>
<span class="line"><span style="color:#E1E4E8;">  );</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F97583;">class</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">AppHome</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">extends</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">StatelessWidget</span><span style="color:#E1E4E8;"> {</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#F97583;">@override</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">Widget</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">build</span><span style="color:#E1E4E8;">(</span><span style="color:#79B8FF;">BuildContext</span><span style="color:#E1E4E8;"> context) {</span></span>
<span class="line"><span style="color:#E1E4E8;">    </span><span style="color:#F97583;">return</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Material</span><span style="color:#E1E4E8;">(</span></span>
<span class="line"><span style="color:#E1E4E8;">      child</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Center</span><span style="color:#E1E4E8;">(</span></span>
<span class="line"><span style="color:#E1E4E8;">        child</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">TextButton</span><span style="color:#E1E4E8;">(</span></span>
<span class="line"><span style="color:#E1E4E8;">          onPressed</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> () {</span></span>
<span class="line"><span style="color:#E1E4E8;">            </span><span style="color:#B392F0;">debugDumpApp</span><span style="color:#E1E4E8;">();</span></span>
<span class="line"><span style="color:#E1E4E8;">          },</span></span>
<span class="line"><span style="color:#E1E4E8;">          child</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">Text</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;Dump App&#39;</span><span style="color:#E1E4E8;">),</span></span>
<span class="line"><span style="color:#E1E4E8;">        ),</span></span>
<span class="line"><span style="color:#E1E4E8;">      ),</span></span>
<span class="line"><span style="color:#E1E4E8;">    );</span></span>
<span class="line"><span style="color:#E1E4E8;">  }</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;package:flutter/material.dart&#39;</span><span style="color:#24292E;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">void</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">main</span><span style="color:#24292E;">() {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#6F42C1;">runApp</span><span style="color:#24292E;">(</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#005CC5;">MaterialApp</span><span style="color:#24292E;">(</span></span>
<span class="line"><span style="color:#24292E;">      home</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">AppHome</span><span style="color:#24292E;">(),</span></span>
<span class="line"><span style="color:#24292E;">    ),</span></span>
<span class="line"><span style="color:#24292E;">  );</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#D73A49;">class</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">AppHome</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">extends</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">StatelessWidget</span><span style="color:#24292E;"> {</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#D73A49;">@override</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#005CC5;">Widget</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">build</span><span style="color:#24292E;">(</span><span style="color:#005CC5;">BuildContext</span><span style="color:#24292E;"> context) {</span></span>
<span class="line"><span style="color:#24292E;">    </span><span style="color:#D73A49;">return</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Material</span><span style="color:#24292E;">(</span></span>
<span class="line"><span style="color:#24292E;">      child</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Center</span><span style="color:#24292E;">(</span></span>
<span class="line"><span style="color:#24292E;">        child</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">TextButton</span><span style="color:#24292E;">(</span></span>
<span class="line"><span style="color:#24292E;">          onPressed</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> () {</span></span>
<span class="line"><span style="color:#24292E;">            </span><span style="color:#6F42C1;">debugDumpApp</span><span style="color:#24292E;">();</span></span>
<span class="line"><span style="color:#24292E;">          },</span></span>
<span class="line"><span style="color:#24292E;">          child</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">Text</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;Dump App&#39;</span><span style="color:#24292E;">),</span></span>
<span class="line"><span style="color:#24292E;">        ),</span></span>
<span class="line"><span style="color:#24292E;">      ),</span></span>
<span class="line"><span style="color:#24292E;">    );</span></span>
<span class="line"><span style="color:#24292E;">  }</span></span>
<span class="line"><span style="color:#24292E;">}</span></span></code></pre></div><p>…会输出这样的内容（精确的细节会根据框架的版本、设备的大小等等而变化）：</p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">): WidgetsFlutterBinding - CHECKED MODE</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">): RenderObjectToWidgetAdapter</span><span style="color:#F97583;">&lt;</span><span style="color:#E1E4E8;">RenderBox</span><span style="color:#9ECBFF;">&gt;([GlobalObjectKey RenderView(</span><span style="color:#79B8FF;">497039273</span><span style="color:#9ECBFF;">)]; </span><span style="color:#B392F0;">renderObject:</span><span style="color:#9ECBFF;"> RenderView)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">): └MaterialApp(</span><span style="color:#B392F0;">state:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">_MaterialAppState</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">1009803148</span><span style="color:#E1E4E8;">))</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):  </span><span style="color:#B392F0;">└ScrollConfiguration</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;">I/flutter ( </span><span style="color:#B392F0;">6559</span><span style="color:#E1E4E8;">):   └AnimatedTheme(</span><span style="color:#B392F0;">duration:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">200</span><span style="color:#9ECBFF;">ms</span><span style="color:#E1E4E8;">; </span><span style="color:#B392F0;">state:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">_AnimatedThemeState</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">543295893</span><span style="color:#E1E4E8;">; </span><span style="color:#B392F0;">ticker</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">inactive</span><span style="color:#E1E4E8;">; </span><span style="color:#B392F0;">ThemeDataTween(ThemeData(Brightness.light</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">Color</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">0xff2196f3</span><span style="color:#E1E4E8;">) </span><span style="color:#9ECBFF;">etc...</span><span style="color:#E1E4E8;">) </span><span style="color:#9ECBFF;">→</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">null</span><span style="color:#E1E4E8;">)))</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    └Theme(</span><span style="color:#B392F0;">ThemeData(Brightness.light</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">Color</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">0xff2196f3</span><span style="color:#E1E4E8;">) </span><span style="color:#9ECBFF;">etc...</span><span style="color:#E1E4E8;">))</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):     └WidgetsApp([GlobalObjectKey _MaterialAppState(</span><span style="color:#79B8FF;">1009803148</span><span style="color:#E1E4E8;">)]; </span><span style="color:#B392F0;">state:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">_WidgetsAppState</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">552902158</span><span style="color:#E1E4E8;">))</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):      </span><span style="color:#B392F0;">└CheckedModeBanner</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;">I/flutter ( </span><span style="color:#B392F0;">6559</span><span style="color:#E1E4E8;">):       </span><span style="color:#B392F0;">└Banner</span><span style="color:#E1E4E8;">()</span></span>
<span class="line"><span style="color:#E1E4E8;">I/flutter ( </span><span style="color:#B392F0;">6559</span><span style="color:#E1E4E8;">):        └CustomPaint(</span><span style="color:#B392F0;">renderObject:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">RenderCustomPaint</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):         └DefaultTextStyle(</span><span style="color:#B392F0;">inherit:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">true</span><span style="color:#E1E4E8;">; </span><span style="color:#B392F0;">color:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">Color</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">0xd0ff0000</span><span style="color:#E1E4E8;">); </span><span style="color:#B392F0;">family:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&quot;monospace&quot;</span><span style="color:#E1E4E8;">; </span><span style="color:#B392F0;">size:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">48.0</span><span style="color:#E1E4E8;">; </span><span style="color:#B392F0;">weight:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">900</span><span style="color:#E1E4E8;">; </span><span style="color:#B392F0;">decoration:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">double</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">Color</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">0xffffff00</span><span style="color:#E1E4E8;">) </span><span style="color:#9ECBFF;">TextDecoration.underline</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):          └MediaQuery(</span><span style="color:#B392F0;">MediaQueryData(size:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">Size</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">411.4,</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">683.4</span><span style="color:#E1E4E8;">)</span><span style="color:#9ECBFF;">,</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">devicePixelRatio:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">2.625</span><span style="color:#9ECBFF;">,</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">textScaleFactor:</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1.0</span><span style="color:#9ECBFF;">,</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">padding:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">EdgeInsets</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">0.0,</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">24.0</span><span style="color:#9ECBFF;">,</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0.0</span><span style="color:#9ECBFF;">,</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">0.0</span><span style="color:#E1E4E8;">)))</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):           └LocaleQuery(</span><span style="color:#B392F0;">null</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):            └Title(</span><span style="color:#B392F0;">color:</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">Color</span><span style="color:#E1E4E8;">(</span><span style="color:#B392F0;">0xff2196f3</span><span style="color:#E1E4E8;">))</span></span>
<span class="line"><span style="color:#79B8FF;">...</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;">#省略剩余内容</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">): WidgetsFlutterBinding - CHECKED MODE</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">): RenderObjectToWidgetAdapter</span><span style="color:#D73A49;">&lt;</span><span style="color:#24292E;">RenderBox</span><span style="color:#032F62;">&gt;([GlobalObjectKey RenderView(</span><span style="color:#005CC5;">497039273</span><span style="color:#032F62;">)]; </span><span style="color:#6F42C1;">renderObject:</span><span style="color:#032F62;"> RenderView)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">): └MaterialApp(</span><span style="color:#6F42C1;">state:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">_MaterialAppState</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">1009803148</span><span style="color:#24292E;">))</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):  </span><span style="color:#6F42C1;">└ScrollConfiguration</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;">I/flutter ( </span><span style="color:#6F42C1;">6559</span><span style="color:#24292E;">):   └AnimatedTheme(</span><span style="color:#6F42C1;">duration:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">200</span><span style="color:#032F62;">ms</span><span style="color:#24292E;">; </span><span style="color:#6F42C1;">state:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">_AnimatedThemeState</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">543295893</span><span style="color:#24292E;">; </span><span style="color:#6F42C1;">ticker</span><span style="color:#24292E;"> </span><span style="color:#032F62;">inactive</span><span style="color:#24292E;">; </span><span style="color:#6F42C1;">ThemeDataTween(ThemeData(Brightness.light</span><span style="color:#24292E;"> </span><span style="color:#032F62;">Color</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">0xff2196f3</span><span style="color:#24292E;">) </span><span style="color:#032F62;">etc...</span><span style="color:#24292E;">) </span><span style="color:#032F62;">→</span><span style="color:#24292E;"> </span><span style="color:#032F62;">null</span><span style="color:#24292E;">)))</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    └Theme(</span><span style="color:#6F42C1;">ThemeData(Brightness.light</span><span style="color:#24292E;"> </span><span style="color:#032F62;">Color</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">0xff2196f3</span><span style="color:#24292E;">) </span><span style="color:#032F62;">etc...</span><span style="color:#24292E;">))</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):     └WidgetsApp([GlobalObjectKey _MaterialAppState(</span><span style="color:#005CC5;">1009803148</span><span style="color:#24292E;">)]; </span><span style="color:#6F42C1;">state:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">_WidgetsAppState</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">552902158</span><span style="color:#24292E;">))</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):      </span><span style="color:#6F42C1;">└CheckedModeBanner</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;">I/flutter ( </span><span style="color:#6F42C1;">6559</span><span style="color:#24292E;">):       </span><span style="color:#6F42C1;">└Banner</span><span style="color:#24292E;">()</span></span>
<span class="line"><span style="color:#24292E;">I/flutter ( </span><span style="color:#6F42C1;">6559</span><span style="color:#24292E;">):        └CustomPaint(</span><span style="color:#6F42C1;">renderObject:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">RenderCustomPaint</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):         └DefaultTextStyle(</span><span style="color:#6F42C1;">inherit:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">true</span><span style="color:#24292E;">; </span><span style="color:#6F42C1;">color:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">Color</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">0xd0ff0000</span><span style="color:#24292E;">); </span><span style="color:#6F42C1;">family:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&quot;monospace&quot;</span><span style="color:#24292E;">; </span><span style="color:#6F42C1;">size:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">48.0</span><span style="color:#24292E;">; </span><span style="color:#6F42C1;">weight:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">900</span><span style="color:#24292E;">; </span><span style="color:#6F42C1;">decoration:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">double</span><span style="color:#24292E;"> </span><span style="color:#032F62;">Color</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">0xffffff00</span><span style="color:#24292E;">) </span><span style="color:#032F62;">TextDecoration.underline</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):          └MediaQuery(</span><span style="color:#6F42C1;">MediaQueryData(size:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">Size</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">411.4,</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">683.4</span><span style="color:#24292E;">)</span><span style="color:#032F62;">,</span><span style="color:#24292E;"> </span><span style="color:#032F62;">devicePixelRatio:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">2.625</span><span style="color:#032F62;">,</span><span style="color:#24292E;"> </span><span style="color:#032F62;">textScaleFactor:</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1.0</span><span style="color:#032F62;">,</span><span style="color:#24292E;"> </span><span style="color:#032F62;">padding:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">EdgeInsets</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">0.0,</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">24.0</span><span style="color:#032F62;">,</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0.0</span><span style="color:#032F62;">,</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">0.0</span><span style="color:#24292E;">)))</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):           └LocaleQuery(</span><span style="color:#6F42C1;">null</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):            └Title(</span><span style="color:#6F42C1;">color:</span><span style="color:#24292E;"> </span><span style="color:#032F62;">Color</span><span style="color:#24292E;">(</span><span style="color:#6F42C1;">0xff2196f3</span><span style="color:#24292E;">))</span></span>
<span class="line"><span style="color:#005CC5;">...</span><span style="color:#24292E;"> </span><span style="color:#6A737D;">#省略剩余内容</span></span></code></pre></div><p>这是一个“扁平化”的树，显示了通过各种构建函数投影的所有widget（如果你在widget树的根中调用<code>toStringDeepwidget</code>，这是你获得的树）。 你会看到很多在你的应用源代码中没有出现的widget，因为它们是被框架中widget的<code>build()</code>函数插入的。例如，<a href="https://docs.flutter.io/flutter/material/InkFeature-class.html" target="_blank" rel="noreferrer"><code>InkFeature</code></a>是Material widget的一个实现细节 。</p><p>当按钮从被按下变为被释放时debugDumpApp()被调用，TextButton对象同时调用<code>setState()</code>，并将自己标记为&quot;dirty&quot;。我们还可以查看已注册了哪些手势监听器; 在这种情况下，一个单一的GestureDetector被列出，并且监听“tap”手势（“tap”是<code>TapGestureDetector</code>的<code>toStringShort</code>函数输出的）。</p><p>如果我们编写自己的widget，则可以通过覆盖<a href="https://docs.flutter.io/flutter/widgets/Widget/debugFillProperties.html" target="_blank" rel="noreferrer"><code>debugFillProperties()</code></a>来添加信息。 将<a href="https://docs.flutter.io/flutter/foundation/DiagnosticsProperty-class.html" target="_blank" rel="noreferrer">DiagnosticsProperty</a>对象作为方法参数，并调用父类方法。 该函数是该<code>toString</code>方法用来填充小部件描述信息的。</p><h3 id="_2-渲染树" tabindex="-1">2. 渲染树 <a class="header-anchor" href="#_2-渲染树" aria-label="Permalink to &quot;2. 渲染树&quot;">​</a></h3><p>如果我们尝试调试布局问题，那么Widget树可能不够详细。在这种情况下，我们可以通过调用<code>debugDumpRenderTree()</code>转储渲染树。 正如<code>debugDumpApp()</code>，除布局或绘制阶段外，我们可以随时调用此函数。作为一般规则，从<a href="https://docs.flutter.io/flutter/scheduler/SchedulerBinding/addPersistentFrameCallback.html" target="_blank" rel="noreferrer">frame 回调</a> 或事件处理器中调用它是最佳解决方案。</p><p>要调用<code>debugDumpRenderTree()</code>，我们需要添加<code>import&#39;package:flutter/rendering.dart&#39;;</code>到我们的源文件。</p><p>上面这个小例子的输出结果如下所示：</p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">): RenderView</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):  │ debug mode enabled - android</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):  │ window size: Size(</span><span style="color:#B392F0;">1080.0,</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">1794.0</span><span style="color:#E1E4E8;">) (in physical pixels)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):  │ device pixel ratio: 2.625 (</span><span style="color:#B392F0;">physical</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pixels</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">per</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">logical</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">pixel</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):  │ configuration: Size(</span><span style="color:#B392F0;">411.4,</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">683.4</span><span style="color:#E1E4E8;">) at 2.625x (in logical pixels)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):  │</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):  └─child: RenderCustomPaint</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    │ creator: CustomPaint ← Banner ← CheckedModeBanner ←</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    │   WidgetsApp-[GlobalObjectKey _MaterialAppState(</span><span style="color:#79B8FF;">1009803148</span><span style="color:#E1E4E8;">)] ←</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    │   Theme ← AnimatedTheme ← ScrollConfiguration ← MaterialApp ←</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    │   [root]</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    │ parentData: </span><span style="color:#F97583;">&lt;</span><span style="color:#E1E4E8;">none</span><span style="color:#F97583;">&gt;</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    │ constraints: BoxConstraints(w</span><span style="color:#F97583;">=</span><span style="color:#79B8FF;">411.4</span><span style="color:#9ECBFF;">,</span><span style="color:#E1E4E8;"> h</span><span style="color:#F97583;">=</span><span style="color:#79B8FF;">683.4</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#B392F0;">I/flutter</span><span style="color:#E1E4E8;"> ( </span><span style="color:#79B8FF;">6559</span><span style="color:#E1E4E8;">):    │ size: Size(</span><span style="color:#B392F0;">411.4,</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">683.4</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#79B8FF;">...</span><span style="color:#E1E4E8;"> </span><span style="color:#6A737D;"># 省略</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">): RenderView</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):  │ debug mode enabled - android</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):  │ window size: Size(</span><span style="color:#6F42C1;">1080.0,</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">1794.0</span><span style="color:#24292E;">) (in physical pixels)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):  │ device pixel ratio: 2.625 (</span><span style="color:#6F42C1;">physical</span><span style="color:#24292E;"> </span><span style="color:#032F62;">pixels</span><span style="color:#24292E;"> </span><span style="color:#032F62;">per</span><span style="color:#24292E;"> </span><span style="color:#032F62;">logical</span><span style="color:#24292E;"> </span><span style="color:#032F62;">pixel</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):  │ configuration: Size(</span><span style="color:#6F42C1;">411.4,</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">683.4</span><span style="color:#24292E;">) at 2.625x (in logical pixels)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):  │</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):  └─child: RenderCustomPaint</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    │ creator: CustomPaint ← Banner ← CheckedModeBanner ←</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    │   WidgetsApp-[GlobalObjectKey _MaterialAppState(</span><span style="color:#005CC5;">1009803148</span><span style="color:#24292E;">)] ←</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    │   Theme ← AnimatedTheme ← ScrollConfiguration ← MaterialApp ←</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    │   [root]</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    │ parentData: </span><span style="color:#D73A49;">&lt;</span><span style="color:#24292E;">none</span><span style="color:#D73A49;">&gt;</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    │ constraints: BoxConstraints(w</span><span style="color:#D73A49;">=</span><span style="color:#005CC5;">411.4</span><span style="color:#032F62;">,</span><span style="color:#24292E;"> h</span><span style="color:#D73A49;">=</span><span style="color:#005CC5;">683.4</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#6F42C1;">I/flutter</span><span style="color:#24292E;"> ( </span><span style="color:#005CC5;">6559</span><span style="color:#24292E;">):    │ size: Size(</span><span style="color:#6F42C1;">411.4,</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">683.4</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#005CC5;">...</span><span style="color:#24292E;"> </span><span style="color:#6A737D;"># 省略</span></span></code></pre></div><p>这是根<code>RenderObject</code>对象的<code>toStringDeep</code>函数的输出。</p><p>当调试布局问题时，关键要看的是<code>size</code>和<code>constraints</code>字段。约束沿着树向下传递，尺寸向上传递。</p><p>如果我们编写自己的渲染对象，则可以通过覆盖<a href="https://docs.flutter.io/flutter/rendering/Layer/debugFillProperties.html" target="_blank" rel="noreferrer"><code>debugFillProperties()</code></a>将信息添加到转储。 将<a href="https://docs.flutter.io/flutter/foundation/DiagnosticsProperty-class.html" target="_blank" rel="noreferrer">DiagnosticsProperty</a>对象作为方法的参数，并调用父类方法。</p><h3 id="_3-layer树" tabindex="-1">3. Layer树 <a class="header-anchor" href="#_3-layer树" aria-label="Permalink to &quot;3. Layer树&quot;">​</a></h3><p>读者可以理解为渲染树是可以分层的，而最终绘制需要将不同的层合成起来，而Layer则是绘制时需要合成的层，如果我们尝试调试合成问题，则可以使用<a href="https://docs.flutter.io/flutter/rendering/debugDumpLayerTree.html" target="_blank" rel="noreferrer"><code>debugDumpLayerTree()</code></a>。对于上面的例子，它会输出：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">I/flutter : TransformLayer</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ creator: [root]</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ offset: Offset(0.0, 0.0)</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ transform:</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │   [0] 3.5,0.0,0.0,0.0</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │   [1] 0.0,3.5,0.0,0.0</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │   [2] 0.0,0.0,1.0,0.0</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │   [3] 0.0,0.0,0.0,1.0</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  ├─child 1: OffsetLayer</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ │ creator: RepaintBoundary ← _FocusScope ← Semantics ← Focus-[GlobalObjectKey MaterialPageRoute(560156430)] ← _ModalScope-[GlobalKey 328026813] ← _OverlayEntry-[GlobalKey 388965355] ← Stack ← Overlay-[GlobalKey 625702218] ← Navigator-[GlobalObjectKey _MaterialAppState(859106034)] ← Title ← ⋯</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ │ offset: Offset(0.0, 0.0)</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ │</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ └─child 1: PictureLayer</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  └─child 2: PictureLayer</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">I/flutter : TransformLayer</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ creator: [root]</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ offset: Offset(0.0, 0.0)</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ transform:</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │   [0] 3.5,0.0,0.0,0.0</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │   [1] 0.0,3.5,0.0,0.0</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │   [2] 0.0,0.0,1.0,0.0</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │   [3] 0.0,0.0,0.0,1.0</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  ├─child 1: OffsetLayer</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ │ creator: RepaintBoundary ← _FocusScope ← Semantics ← Focus-[GlobalObjectKey MaterialPageRoute(560156430)] ← _ModalScope-[GlobalKey 328026813] ← _OverlayEntry-[GlobalKey 388965355] ← Stack ← Overlay-[GlobalKey 625702218] ← Navigator-[GlobalObjectKey _MaterialAppState(859106034)] ← Title ← ⋯</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ │ offset: Offset(0.0, 0.0)</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ │</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ └─child 1: PictureLayer</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  └─child 2: PictureLayer</span></span></code></pre></div><p>这是根<code>Layer</code>的<code>toStringDeep</code>输出的。</p><p>根部的变换是应用设备像素比的变换; 在这种情况下，每个逻辑像素代表3.5个设备像素。</p><p><code>RepaintBoundary</code> widget在渲染树的层中创建了一个<code>RenderRepaintBoundary</code>。这用于减少需要重绘的需求量。</p><h3 id="_4-语义" tabindex="-1">4. 语义 <a class="header-anchor" href="#_4-语义" aria-label="Permalink to &quot;4. 语义&quot;">​</a></h3><p>我们还可以调用<a href="https://docs.flutter.io/flutter/rendering/debugDumpSemanticsTree.html" target="_blank" rel="noreferrer"><code>debugDumpSemanticsTree()</code></a>获取语义树（呈现给系统可访问性API的树）的转储。 要使用此功能，必须首先启用辅助功能，例如启用系统辅助工具或<code>SemanticsDebugger</code> （下面讨论）。</p><p>对于上面的例子，它会输出:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">I/flutter : SemanticsNode(0; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4))</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  ├SemanticsNode(1; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4))</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  │ └SemanticsNode(2; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4); canBeTapped)</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :  └SemanticsNode(3; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4))</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter :    └SemanticsNode(4; Rect.fromLTRB(0.0, 0.0, 82.0, 36.0); canBeTapped; &quot;Dump App&quot;)</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">I/flutter : SemanticsNode(0; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4))</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  ├SemanticsNode(1; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4))</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  │ └SemanticsNode(2; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4); canBeTapped)</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :  └SemanticsNode(3; Rect.fromLTRB(0.0, 0.0, 411.4, 683.4))</span></span>
<span class="line"><span style="color:#24292e;">I/flutter :    └SemanticsNode(4; Rect.fromLTRB(0.0, 0.0, 82.0, 36.0); canBeTapped; &quot;Dump App&quot;)</span></span></code></pre></div><h3 id="_5-调度" tabindex="-1">5. 调度 <a class="header-anchor" href="#_5-调度" aria-label="Permalink to &quot;5. 调度&quot;">​</a></h3><p>要找出相对于帧的开始/结束事件发生的位置，可以切换<a href="https://docs.flutter.io/flutter/scheduler/debugPrintBeginFrameBanner.html" target="_blank" rel="noreferrer"><code>debugPrintBeginFrameBanner</code></a>和<a href="https://docs.flutter.io/flutter/scheduler/debugPrintEndFrameBanner.html" target="_blank" rel="noreferrer"><code>debugPrintEndFrameBanner</code></a>布尔值以将帧的开始和结束打印到控制台。</p><p>例如:</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#e1e4e8;">I/flutter : ▄▄▄▄▄▄▄▄ Frame 12         30s 437.086ms ▄▄▄▄▄▄▄▄</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter : Debug print: Am I performing this work more than once per frame?</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter : Debug print: Am I performing this work more than once per frame?</span></span>
<span class="line"><span style="color:#e1e4e8;">I/flutter : ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292e;">I/flutter : ▄▄▄▄▄▄▄▄ Frame 12         30s 437.086ms ▄▄▄▄▄▄▄▄</span></span>
<span class="line"><span style="color:#24292e;">I/flutter : Debug print: Am I performing this work more than once per frame?</span></span>
<span class="line"><span style="color:#24292e;">I/flutter : Debug print: Am I performing this work more than once per frame?</span></span>
<span class="line"><span style="color:#24292e;">I/flutter : ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀</span></span></code></pre></div><p><a href="https://docs.flutter.io/flutter/scheduler/debugPrintScheduleFrameStacks.html" target="_blank" rel="noreferrer"><code>debugPrintScheduleFrameStacks</code></a>还可以用来打印导致当前帧被调度的调用堆栈。</p><h3 id="_6-可视化调试" tabindex="-1">6. 可视化调试 <a class="header-anchor" href="#_6-可视化调试" aria-label="Permalink to &quot;6. 可视化调试&quot;">​</a></h3><p>我们也可以通过设置<code>debugPaintSizeEnabled</code>为<code>true</code>以可视方式调试布局问题。 这是来自<code>rendering</code>库的布尔值。它可以在任何时候启用，并在为true时影响绘制。 设置它的最简单方法是在<code>void main()</code>的顶部设置。</p><p>当它被启用时，所有的盒子都会得到一个明亮的深青色边框，padding（来自widget如Padding）显示为浅蓝色，子widget周围有一个深蓝色框， 对齐方式（来自widget如Center和Align）显示为黄色箭头. 空白（如没有任何子节点的Container）以灰色显示。</p><p><a href="https://docs.flutter.io/flutter/rendering/debugPaintBaselinesEnabled.html" target="_blank" rel="noreferrer"><code>debugPaintBaselinesEnabled</code></a>做了类似的事情，但对于具有基线的对象，文字基线以绿色显示，表意(ideographic)基线以橙色显示。</p><p><a href="https://docs.flutter.io/flutter/rendering/debugPaintPointersEnabled.html" target="_blank" rel="noreferrer"><code>debugPaintPointersEnabled</code></a>标志打开一个特殊模式，任何正在点击的对象都会以深青色突出显示。 这可以帮助我们确定某个对象是否以某种不正确的方式进行hit测试（Flutter检测点击的位置是否有能响应用户操作的widget）,例如，如果它实际上超出了其父项的范围，首先不会考虑通过hit测试。</p><p>如果我们尝试调试合成图层，例如以确定是否以及在何处添加<code>RepaintBoundary</code> widget，则可以使用<a href="https://docs.flutter.io/flutter/rendering/debugPaintLayerBordersEnabled.html" target="_blank" rel="noreferrer"><code>debugPaintLayerBordersEnabled</code></a> 标志， 该标志用橙色或轮廓线标出每个层的边界，或者使用<a href="https://docs.flutter.io/flutter/rendering/debugRepaintRainbowEnabled.html" target="_blank" rel="noreferrer"><code>debugRepaintRainbowEnabled</code></a>标志， 只要他们重绘时，这会使该层被一组旋转色所覆盖。</p><p>所有这些标志只能在调试模式下工作。通常，Flutter框架中以“<code>debug...</code>” 开头的任何内容都只能在调试模式下工作。</p><h3 id="_7-调试动画" tabindex="-1">7. 调试动画 <a class="header-anchor" href="#_7-调试动画" aria-label="Permalink to &quot;7. 调试动画&quot;">​</a></h3><p>调试动画最简单的方法是减慢它们的速度。为此，请将<a href="https://docs.flutter.io/flutter/scheduler/timeDilation.html" target="_blank" rel="noreferrer"><code>timeDilation</code></a>变量（在scheduler库中）设置为大于1.0的数字，例如50.0。 最好在应用程序启动时只设置一次。如果我们在运行中更改它，尤其是在动画运行时将其值改小，则在观察时可能会出现倒退，这可能会导致断言命中，并且这通常会干扰我们的开发工作。</p><h3 id="_8-调试性能问题" tabindex="-1">8. 调试性能问题 <a class="header-anchor" href="#_8-调试性能问题" aria-label="Permalink to &quot;8. 调试性能问题&quot;">​</a></h3><p>要了解我们的应用程序导致重新布局或重新绘制的原因，我们可以分别设置<a href="https://docs.flutter.io/flutter/rendering/debugPrintMarkNeedsLayoutStacks.html" target="_blank" rel="noreferrer"><code>debugPrintMarkNeedsLayoutStacks</code></a>和 <a href="https://docs.flutter.io/flutter/rendering/debugPrintMarkNeedsPaintStacks.html" target="_blank" rel="noreferrer"><code>debugPrintMarkNeedsPaintStacks</code></a>标志。 每当渲染盒被要求重新布局和重新绘制时，这些都会将堆栈跟踪记录到控制台。如果这种方法对我们有用，我们可以使用<code>services</code>库中的<code>debugPrintStack()</code>方法按需打印堆栈痕迹。</p><h3 id="_9-统计应用启动时间" tabindex="-1">9. 统计应用启动时间 <a class="header-anchor" href="#_9-统计应用启动时间" aria-label="Permalink to &quot;9. 统计应用启动时间&quot;">​</a></h3><p>要收集有关Flutter应用程序启动所需时间的详细信息，可以在运行<code>flutter run</code>时使用<code>trace-startup</code>和<code>profile</code>选项。</p><div class="language-shell vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#B392F0;">$</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">flutter</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">run</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--trace-startup</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">--profile</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#6F42C1;">$</span><span style="color:#24292E;"> </span><span style="color:#032F62;">flutter</span><span style="color:#24292E;"> </span><span style="color:#032F62;">run</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">--trace-startup</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">--profile</span></span></code></pre></div><p>跟踪输出保存为<code>start_up_info.json</code>，在Flutter工程目录在build目录下。输出列出了从应用程序启动到这些跟踪事件（以微秒捕获）所用的时间：</p><ul><li>进入Flutter引擎时.</li><li>展示应用第一帧时.</li><li>初始化Flutter框架时.</li><li>完成Flutter框架初始化时.</li></ul><p>如 :</p><div class="language-json vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">{</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">&quot;engineEnterTimestampMicros&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">96025565262</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">&quot;timeToFirstFrameMicros&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">2171978</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">&quot;timeToFrameworkInitMicros&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">514585</span><span style="color:#E1E4E8;">,</span></span>
<span class="line"><span style="color:#E1E4E8;">  </span><span style="color:#79B8FF;">&quot;timeAfterFrameworkInitMicros&quot;</span><span style="color:#E1E4E8;">: </span><span style="color:#79B8FF;">1657393</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">{</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#005CC5;">&quot;engineEnterTimestampMicros&quot;</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">96025565262</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#005CC5;">&quot;timeToFirstFrameMicros&quot;</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">2171978</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#005CC5;">&quot;timeToFrameworkInitMicros&quot;</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">514585</span><span style="color:#24292E;">,</span></span>
<span class="line"><span style="color:#24292E;">  </span><span style="color:#005CC5;">&quot;timeAfterFrameworkInitMicros&quot;</span><span style="color:#24292E;">: </span><span style="color:#005CC5;">1657393</span></span>
<span class="line"><span style="color:#24292E;">}</span></span></code></pre></div><h3 id="_10-跟踪dart代码性能" tabindex="-1">10. 跟踪Dart代码性能 <a class="header-anchor" href="#_10-跟踪dart代码性能" aria-label="Permalink to &quot;10. 跟踪Dart代码性能&quot;">​</a></h3><p>要执行自定义性能跟踪和测量Dart任意代码段的wall/CPU时间（类似于在Android上使用<a href="https://developer.android.com/studio/profile/systrace.html" target="_blank" rel="noreferrer">systrace</a>）。 使用<code>dart:developer</code>的<a href="https://api.dartlang.org/stable/dart-developer/Timeline-class.html" target="_blank" rel="noreferrer">Timeline</a>工具来包含你想测试的代码块，例如：</p><div class="language-dart vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">dart</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#79B8FF;">Timeline</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">startSync</span><span style="color:#E1E4E8;">(</span><span style="color:#9ECBFF;">&#39;interesting function&#39;</span><span style="color:#E1E4E8;">);</span></span>
<span class="line"><span style="color:#6A737D;">// iWonderHowLongThisTakes();</span></span>
<span class="line"><span style="color:#79B8FF;">Timeline</span><span style="color:#E1E4E8;">.</span><span style="color:#B392F0;">finishSync</span><span style="color:#E1E4E8;">();</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#005CC5;">Timeline</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">startSync</span><span style="color:#24292E;">(</span><span style="color:#032F62;">&#39;interesting function&#39;</span><span style="color:#24292E;">);</span></span>
<span class="line"><span style="color:#6A737D;">// iWonderHowLongThisTakes();</span></span>
<span class="line"><span style="color:#005CC5;">Timeline</span><span style="color:#24292E;">.</span><span style="color:#6F42C1;">finishSync</span><span style="color:#24292E;">();</span></span></code></pre></div><p>然后打开你应用程序的Observatory timeline页面，在“Recorded Streams”中选择‘Dart’复选框，并执行你想测量的功能。</p><p>刷新页面将在Chrome的<a href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool" target="_blank" rel="noreferrer">跟踪工具</a>中显示应用按时间顺序排列的timeline记录。</p><p>请确保运行<code>flutter run</code>时带有<code>--profile</code>标志，以确保运行时性能特征与我们的最终产品差异最小。</p><h2 id="_2-7-3-devtools" tabindex="-1">2.7.3 DevTools <a class="header-anchor" href="#_2-7-3-devtools" aria-label="Permalink to &quot;2.7.3 DevTools&quot;">​</a></h2><p>Flutter DevTools 是 Flutter 可视化调试工具，如图2-20。它将各种调试工具和能力集成在一起，并提供可视化调试界面，它的功能很强大，掌握它会对我们开发和优化 Flutter 应用有很大帮助。由于 Flutter DevTools 功能很多，短篇幅是讲不完的，本书不做专门介绍，Flutter 官网对 DevTools 有详细的介绍，读者可以去官网查看相关教程。</p><p><img src="/assets/2-20.03769490.png" alt="2-20"></p></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://gitee.com/luoguangguang/note/tree/master/docs/largeFrontEnd/flutter/chapter2/flutter_app_debug.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> 在Gitee上参与编辑此页<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><!----></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="./largeFrontEnd/flutter/chapter1/index.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Next page</span><span class="title" data-v-ef5dee53>第一章 初识Flutter</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-1919c326 data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the MIT License.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present LG of GZU</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"backend_index.md\":\"0cb07c7c\",\"largefrontend_electron_index.md\":\"adab8e13\",\"largefrontend_flutter_chapter1_index.md\":\"5106cc23\",\"index.md\":\"20a66851\",\"largefrontend_flutter_chapter10_intro.md\":\"5756d1e8\",\"largefrontend_flutter_chapter10_index.md\":\"87e47f16\",\"largefrontend_flutter_chapter1_flutter_intro.md\":\"9ad5fc78\",\"largefrontend_flutter_chapter12_package_and_plugin.md\":\"c2f14cd7\",\"largefrontend_flutter_chapter12_flutter_web.md\":\"f4b6b743\",\"largefrontend_flutter_chapter10_combine.md\":\"333319d8\",\"largefrontend_flutter_chapter14_flutter_ui_system.md\":\"a1011f7b\",\"largefrontend_flutter_chapter11_index.md\":\"35dcdd7c\",\"largefrontend_flutter_chapter12_index.md\":\"890b799c\",\"largefrontend_flutter_chapter13_index.md\":\"6db9b579\",\"largefrontend_flutter_chapter14_index.md\":\"87f7da6b\",\"largefrontend_flutter_chapter1_mobile_development_intro.md\":\"40c15ac2\",\"largefrontend_flutter_chapter10_turn_box.md\":\"6a792fe1\",\"largefrontend_flutter_chapter3_index.md\":\"bc1d0de5\",\"largefrontend_flutter_chapter4_stack.md\":\"3f5c3186\",\"largefrontend_flutter_chapter1_install_flutter.md\":\"4543c368\",\"largefrontend_flutter_chapter14_paint.md\":\"8f7289b0\",\"largefrontend_flutter_chapter5_padding.md\":\"9fadce05\",\"largefrontend_flutter_chapter4_index.md\":\"f9b298f7\",\"largefrontend_flutter_chapter2_flutter_package_mgr.md\":\"4a3b7161\",\"largefrontend_flutter_chapter11_socket.md\":\"e8264e44\",\"largefrontend_flutter_chapter4_intro.md\":\"1341b5fd\",\"largefrontend_flutter_chapter14_update.md\":\"e4d2c2f0\",\"largefrontend_flutter_chapter5_index.md\":\"455baa0a\",\"largefrontend_flutter_chapter4_alignment.md\":\"a6596610\",\"largefrontend_flutter_chapter13_multi_languages_support.md\":\"c113238d\",\"largefrontend_flutter_chapter11_dio.md\":\"64f4e813\",\"largefrontend_flutter_chapter2_first_flutter_app.md\":\"b650181d\",\"largefrontend_flutter_chapter2_flutter_app_debug.md\":\"67a72433\",\"largefrontend_flutter_chapter2_state_manage.md\":\"9bb80d37\",\"largefrontend_flutter_chapter6_index.md\":\"5a321b81\",\"largefrontend_flutter_chapter5_material_scaffold.md\":\"8e6b896a\",\"largefrontend_flutter_chapter3_buttons.md\":\"ef950360\",\"largefrontend_flutter_chapter10_done_widget.md\":\"c3b44318\",\"largefrontend_flutter_chapter6_single_child_scrollview.md\":\"e3f75f3b\",\"largefrontend_flutter_chapter14_paint_flow.md\":\"d2f8102a\",\"largefrontend_flutter_chapter6_intro.md\":\"125a064e\",\"largefrontend_flutter_chapter5_transform.md\":\"22708e1e\",\"largefrontend_flutter_chapter14_layer.md\":\"4ed449fc\",\"largefrontend_flutter_chapter11_websocket.md\":\"0a022e47\",\"largefrontend_flutter_chapter5_fittedbox.md\":\"db915726\",\"largefrontend_flutter_chapter2_index.md\":\"d8e937b7\",\"largefrontend_flutter_chapter3_radio_and_checkbox.md\":\"025aba21\",\"largefrontend_flutter_chapter13_locallization_implement.md\":\"dc4b83fe\",\"largefrontend_flutter_chapter2_thread_model_and_error_report.md\":\"a29199d6\",\"largefrontend_flutter_chapter5_decoratedbox.md\":\"20f093ba\",\"largefrontend_flutter_chapter14_render_object.md\":\"55a1b551\",\"largefrontend_flutter_chapter14_element_buildcontext.md\":\"4272eae4\",\"largefrontend_flutter_chapter4_wrap_and_flow.md\":\"ac41b5bd\",\"largefrontend_flutter_chapter11_file_operation.md\":\"996a3a5d\",\"largefrontend_flutter_chapter13_faq.md\":\"ba7b9c70\",\"largefrontend_webfrontend_md_10.md\":\"51e0a312\",\"largefrontend_webfrontend_md_24.md\":\"0a4abd08\",\"largefrontend_flutter_chapter14_flutter_app_startup.md\":\"9b5942a1\",\"largefrontend_flutter_chapter10_custom_paint.md\":\"8b2a0a46\",\"largefrontend_flutter_chapter2_flutter_assets_mgr.md\":\"0e38b701\",\"largefrontend_interview_01.md\":\"2ac4b56d\",\"largefrontend_flutter_chapter8_index.md\":\"e83d3d80\",\"largefrontend_webfrontend_md_16.md\":\"a5610416\",\"largefrontend_flutter_chapter9_index.md\":\"3fb342a7\",\"largefrontend_flutter_chapter8_listener.md\":\"1b9b0316\",\"largefrontend_webfrontend_md_37.md\":\"3cacf3a2\",\"largefrontend_flutter_chapter4_layoutbuilder.md\":\"3d4bf94b\",\"largefrontend_webfrontend_md_17.md\":\"ee74edfb\",\"largefrontend_webfrontend_md_13.md\":\"b180bb5b\",\"largefrontend_flutter_chapter7_index.md\":\"0eb456b2\",\"largefrontend_webfrontend_md_31.md\":\"309453c7\",\"largefrontend_webfrontend_md_25.md\":\"95fdb4fe\",\"largefrontend_webfrontend_md_12.md\":\"3b14e491\",\"largefrontend_webfrontend_md_23.md\":\"18f08d72\",\"largefrontend_flutter_chapter11_json_model.md\":\"c84d2ccf\",\"largefrontend_webfrontend_md_01.md\":\"fbb7a35f\",\"largefrontend_flutter_chapter3_progress.md\":\"9bc148d3\",\"largefrontend_webfrontend_md_18.md\":\"ee651cc6\",\"largefrontend_flutter_sponsor.md\":\"e71431a9\",\"largefrontend_webfrontend_md_36.md\":\"f22f6d0d\",\"largefrontend_webfrontend_md_07.md\":\"71c2ad1d\",\"largefrontend_webfrontend_md_19.md\":\"e7907728\",\"largefrontend_webfrontend_md_20.md\":\"5a68bb4f\",\"largefrontend_webfrontend_md_32.md\":\"91d2f39f\",\"largefrontend_flutter_chapter7_futurebuilder_and_streambuilder.md\":\"af3535c0\",\"largefrontend_flutter_chapter9_hero.md\":\"25b46cf2\",\"largefrontend_flutter_chapter8_notification.md\":\"909f6756\",\"largefrontend_webfrontend_md_08.md\":\"0d59dce4\",\"largefrontend_flutter_chapter3_img_and_icon.md\":\"8b409b55\",\"largefrontend_webfrontend_md_04.md\":\"d6c15d55\",\"largefrontend_flutter_chapter9_animated_switcher.md\":\"9c0b3119\",\"largefrontend_webfrontend_md_22.md\":\"7d6fea68\",\"largefrontend_flutter_chapter2_flutter_widget_intro.md\":\"13414fea\",\"largefrontend_flutter_chapter13_intl.md\":\"d4776610\",\"largefrontend_overview_index.md\":\"3c87f69c\",\"largefrontend_flutter_chapter5_container.md\":\"373cc694\",\"largefrontend_wechatminiprogram_index.md\":\"7f40708d\",\"largefrontend_webfrontend_md_38.md\":\"3b6bb332\",\"linux_index.md\":\"624ecc66\",\"largefrontend_webfrontend_md_35.md\":\"f0538423\",\"myteam_index.md\":\"91a2c11f\",\"largefrontend_flutter_chapter6_pageview.md\":\"36fcbc65\",\"largefrontend_webfrontend_md_03.md\":\"2e5087f0\",\"largefrontend_webfrontend_md_21.md\":\"c181316e\",\"largefrontend_flutter_chapter3_input_and_form.md\":\"e4fba9dd\",\"largefrontend_flutter_chapter14_compositing.md\":\"6d96f932\",\"largefrontend_webfrontend_md_29.md\":\"c6fada7d\",\"largefrontend_flutter_chapter4_constraints.md\":\"9e4baace\",\"largefrontend_webfrontend_md_11.md\":\"63cd9c49\",\"largefrontend_webfrontend_md_14.md\":\"1423aeb1\",\"largefrontend_flutter_chapter6_tabview.md\":\"56048fb1\",\"largefrontend_webfrontend_md_33.md\":\"fdbe86fa\",\"largefrontend_flutter_chapter6_nestedscrollview.md\":\"2a66b86a\",\"largefrontend_webfrontend_md_34.md\":\"ad8ea220\",\"largefrontend_flutter_chapter2_flutter_router.md\":\"bb6e776c\",\"largefrontend_webfrontend_md_30.md\":\"cd2cb5aa\",\"largefrontend_flutter_chapter4_flex.md\":\"ebd43d6a\",\"largefrontend_webfrontend_md_09.md\":\"eedafcb1\",\"largefrontend_webfrontend_md_40.md\":\"4d4fefa1\",\"largefrontend_flutter_join_us.md\":\"44c81d86\",\"largefrontend_flutter_chapter9_route_transition.md\":\"f56cf837\",\"largefrontend_uniapp_index.md\":\"fa387c39\",\"largefrontend_flutter_chapter4_row_and_column.md\":\"964229f5\",\"largefrontend_flutter_chapter9_stagger_animation.md\":\"315538f5\",\"largefrontend_flutter_chapter3_text.md\":\"6720230c\",\"largefrontend_flutter_chapter10_watermark.md\":\"2e4ddf03\",\"largefrontend_flutter_chapter11_http.md\":\"efd2ee64\",\"largefrontend_webfrontend_md_06.md\":\"e20b049a\",\"largefrontend_flutter_summary.md\":\"2e31b0a8\",\"largefrontend_flutter_chapter6_animatedlist.md\":\"20d9436f\",\"largefrontend_flutter_chapter5_clip.md\":\"91f4174c\",\"largefrontend_webfrontend_md_02.md\":\"40cd2099\",\"largefrontend_flutter_chapter6_gridview.md\":\"b3be7e60\",\"largefrontend_flutter_chapter6_custom_scrollview.md\":\"01be950c\",\"largefrontend_flutter_chapter11_download_with_chunks.md\":\"9379cc89\",\"largefrontend_flutter_chapter6_scroll_controller.md\":\"ffa2d5fd\",\"largefrontend_flutter_chapter9_intro.md\":\"3fc29b5f\",\"largefrontend_flutter_chapter1_dart.md\":\"6bba4e7c\",\"largefrontend_flutter_chapter7_inherited_widget.md\":\"5a21d704\",\"largefrontend_flutter_index.md\":\"cd81fbbe\",\"largefrontend_flutter_reference.md\":\"36336375\",\"largefrontend_flutter_chapter6_keepalive.md\":\"535137be\",\"largefrontend_flutter_chapter14_layout.md\":\"0d7a8df3\",\"largefrontend_flutter_chapter6_sliver.md\":\"0c8b7553\",\"largefrontend_webfrontend_md_39.md\":\"aef49a57\",\"largefrontend_webfrontend_md_15.md\":\"bf9ff1a1\",\"largefrontend_flutter_chapter14_image_and_cache.md\":\"9622c56b\",\"largefrontend_webfrontend_md_28.md\":\"83169d10\",\"largefrontend_flutter_chapter8_eventbus.md\":\"fc0db86d\",\"largefrontend_flutter_chapter7_value_listenable_builder.md\":\"a0c76121\",\"largefrontend_flutter_preface.md\":\"604b9934\",\"largefrontend_flutter_chapter7_theme.md\":\"c21036bc\",\"largefrontend_webfrontend_md_05.md\":\"f7607009\",\"largefrontend_flutter_chapter6_listview.md\":\"472910bd\",\"largefrontend_flutter_chapter7_provider.md\":\"ab590744\",\"largefrontend_flutter_chapter8_gesture.md\":\"859bbb38\",\"largefrontend_flutter_chapter9_animated_widgets.md\":\"e8cd3c4d\",\"largefrontend_webfrontend_md_26.md\":\"4928006b\",\"largefrontend_flutter_chapter10_gradient_circular_progress_demo.md\":\"b3d48a2c\",\"largefrontend_flutter_chapter8_hittest.md\":\"e963812b\",\"largefrontend_flutter_chapter7_willpopscope.md\":\"d224ecce\",\"largefrontend_flutter_chapter9_animation_structure.md\":\"672eb3c0\",\"largefrontend_flutter_chapter8_gesture_conflict.md\":\"15bbadba\",\"largefrontend_webfrontend_md_27.md\":\"0b5b5e39\",\"largefrontend_flutter_chapter7_dailog.md\":\"5f91e51a\",\"largefrontend_flutter_chapter10_custom_checkbox.md\":\"0db7d50f\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"落光的Pro博客\",\"description\":\"Vite & Vue powered static site generator.\",\"base\":\"./\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"search\":{\"provider\":\"local\",\"options\":{\"locales\":{\"zh\":{\"translations\":{\"button\":{\"buttonText\":\"搜索文档\",\"buttonAriaLabel\":\"搜索文档\"},\"modal\":{\"noResultsText\":\"无法找到相关结果\",\"resetButtonTitle\":\"清除查询条件\",\"footer\":{\"selectText\":\"选择\",\"navigateText\":\"切换\"}}}}}}},\"logo\":\"/icon-radius.png\",\"nav\":[{\"text\":\"大前端\",\"items\":[{\"text\":\"Web前端\",\"link\":\"/largeFrontEnd/webFrontEnd/md/01.md\"},{\"text\":\"Uni-app\",\"link\":\"/largeFrontEnd/uniapp/\"},{\"text\":\"微信小程序\",\"link\":\"/largeFrontEnd/weChatMiniProgram/\"},{\"text\":\"Electron\",\"link\":\"/largeFrontEnd/electron/\"},{\"text\":\"Flutter\",\"link\":\"/largeFrontEnd/flutter/\"},{\"text\":\"前端面试题\",\"link\":\"/largeFrontEnd/interview/01.md\"}]},{\"text\":\"后端\",\"link\":\"/backEnd/\"},{\"text\":\"Linux\",\"link\":\"/linux/\"},{\"text\":\"我的团队\",\"link\":\"/myTeam/\"}],\"sidebar\":{\"/largeFrontEnd/webFrontEnd/\":[{\"text\":\"第一阶段  基础入门\",\"collapsed\":true,\"items\":[{\"text\":\"一、基础认知\",\"link\":\"/largeFrontEnd/webFrontEnd/md/01.md\"},{\"text\":\"二、HTML标签学习\",\"link\":\"/largeFrontEnd/webFrontEnd/md/02.md\"},{\"text\":\"三、HTML基础\",\"link\":\"/largeFrontEnd/webFrontEnd/md/03.md\"},{\"text\":\"四、CSS基础\",\"link\":\"/largeFrontEnd/webFrontEnd/md/04.md\"},{\"text\":\"五、CSS进阶\",\"link\":\"/largeFrontEnd/webFrontEnd/md/05.md\"},{\"text\":\"六、盒子模型\",\"link\":\"/largeFrontEnd/webFrontEnd/md/06.md\"},{\"text\":\"七、CSS浮动\",\"link\":\"/largeFrontEnd/webFrontEnd/md/07.md\"},{\"text\":\"八、CSS定位装饰\",\"link\":\"/largeFrontEnd/webFrontEnd/md/08.md\"},{\"text\":\"九、CSS精灵图\",\"link\":\"/largeFrontEnd/webFrontEnd/md/09.md\"},{\"text\":\"项目前置认知\",\"link\":\"/largeFrontEnd/webFrontEnd/md/10.md\"},{\"text\":\"项目结构搭建\",\"link\":\"/largeFrontEnd/webFrontEnd/md/11.md\"},{\"text\":\"字体图标、动画\",\"link\":\"/largeFrontEnd/webFrontEnd/md/12.md\"},{\"text\":\"移动web开发\",\"link\":\"/largeFrontEnd/webFrontEnd/md/13.md\"}]},{\"text\":\"第二阶段 技术进阶\",\"collapsed\":true,\"items\":[{\"text\":\"JavaScript深入浅出\",\"link\":\"/largeFrontEnd/webFrontEnd/md/14.md\"},{\"text\":\"JavaScript核心之web APIs\",\"link\":\"/largeFrontEnd/webFrontEnd/md/15.md\"},{\"text\":\"一、Web APIS导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/16.md\"},{\"text\":\"二、DOM导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/17.md\"},{\"text\":\"三、事件高级导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/18.md\"},{\"text\":\"四、BOM导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/19.md\"},{\"text\":\"五、PC网页特效导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/20.md\"},{\"text\":\"六、移动端特效导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/21.md\"},{\"text\":\"七、本地存储导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/22.md\"},{\"text\":\"jQuery入门导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/23.md\"},{\"text\":\"数据可视化项目导读\",\"link\":\"/largeFrontEnd/webFrontEnd/md/24.md\"}]},{\"text\":\"Node.js\",\"collapsed\":true,\"items\":[{\"text\":\"buffer(缓冲器)\",\"link\":\"/largeFrontEnd/webFrontEnd/md/25.md\"},{\"text\":\"计算机基础\",\"link\":\"/largeFrontEnd/webFrontEnd/md/26.md\"},{\"text\":\"fs模块\",\"link\":\"/largeFrontEnd/webFrontEnd/md/27.md\"},{\"text\":\"path模块\",\"link\":\"/largeFrontEnd/webFrontEnd/md/28.md\"},{\"text\":\"HTTP模块\",\"link\":\"/largeFrontEnd/webFrontEnd/md/29.md\"},{\"text\":\"Express框架\",\"link\":\"/largeFrontEnd/webFrontEnd/md/30.md\"},{\"text\":\"Mongodb\",\"link\":\"/largeFrontEnd/webFrontEnd/md/31.md\"}]},{\"text\":\"Ajax\",\"link\":\"/largeFrontEnd/webFrontEnd/md/32.md\"},{\"text\":\"前端面试题\",\"collapsed\":true,\"items\":[{\"text\":\"一、CSS\",\"link\":\"/largeFrontEnd/webFrontEnd/md/33.md\"},{\"text\":\"二、JavaScript\",\"link\":\"/largeFrontEnd/webFrontEnd/md/34.md\"},{\"text\":\"三、HTML5CSS3\",\"link\":\"/largeFrontEnd/webFrontEnd/md/35.md\"},{\"text\":\"四、Vue\",\"link\":\"/largeFrontEnd/webFrontEnd/md/36.md\"},{\"text\":\"五、Echarts\",\"link\":\"/largeFrontEnd/webFrontEnd/md/37.md\"},{\"text\":\"六.Uni-APP\",\"link\":\"/largeFrontEnd/webFrontEnd/md/38.md\"},{\"text\":\"七、webpack\",\"link\":\"/largeFrontEnd/webFrontEnd/md/39.md\"},{\"text\":\"八、Git\",\"link\":\"/largeFrontEnd/webFrontEnd/md/40.md\"}]}],\"/largeFrontEnd/flutter/\":[{\"text\":\"Flutter入门到实战\",\"collapsed\":false,\"items\":[{\"text\":\"第一章 初识Flutter\",\"link\":\"/largeFrontEnd/flutter/chapter1/index.md\"},{\"text\":\"第二章 简介\",\"link\":\"/largeFrontEnd/flutter/chapter2/index.md\"},{\"text\":\"第三章 基础组件\",\"link\":\"/largeFrontEnd/flutter/chapter3/index.md\"},{\"text\":\"第四章 布局类组件\",\"link\":\"/largeFrontEnd/flutter/chapter4/index.md\"},{\"text\":\"第五章 容器类Widget\",\"link\":\"/largeFrontEnd/flutter/chapter5/index.md\"},{\"text\":\"第六章 可滚动组件\",\"link\":\"/largeFrontEnd/flutter/chapter6/index.md\"},{\"text\":\"第七章 功能型Widget简介\",\"link\":\"/largeFrontEnd/flutter/chapter7/index.md\"},{\"text\":\"第八章 事件处理与通知\",\"link\":\"/largeFrontEnd/flutter/chapter8/index.md\"},{\"text\":\"第九章 动画\",\"link\":\"/largeFrontEnd/flutter/chapter9/index.md\"},{\"text\":\"第十章 自定义组件\",\"link\":\"/largeFrontEnd/flutter/chapter10/index.md\"},{\"text\":\"第十一章 文件操作\",\"link\":\"/largeFrontEnd/flutter/chapter11/index.md\"},{\"text\":\"第十二章 Flutter 扩展\",\"link\":\"/largeFrontEnd/flutter/chapter12/index.md\"},{\"text\":\"第十三章 多语言\",\"link\":\"/largeFrontEnd/flutter/chapter13/index.md\"},{\"text\":\"第十四章 高级进阶\",\"link\":\"/largeFrontEnd/flutter/chapter14/index.md\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/luoguangguang\"},{\"icon\":{\"svg\":\"<svg role=\\\"img\\\" viewBox=\\\"0 0 24 24\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><title>Dribbble</title><path d=\\\"M12...6.38z\\\"/></svg>\"},\"link\":\"...\",\"ariaLabel\":\"cool link\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-present LG of GZU\"},\"editLink\":{\"pattern\":\"https://gitee.com/luoguangguang/note/tree/master/docs/:path\",\"text\":\"在Gitee上参与编辑此页\"},\"carbonAds\":{\"code\":\"your-carbon-code\",\"placement\":\"your-carbon-placement\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>